<template>
	<view class="edit-info">
		<view class="form-box">
			<view class="form-item" @click="avatarChange">
				<view class="label-box">
					<text class="label">头像</text>
					<text class="required">*</text>
					<text class="tips">(建议用真实头像)</text>
				</view>
				<view class="input-box">
					<image v-if="form.avatar" class="avatar" :src="form.avatar" mode="aspectFill"></image>
					<input v-else class="input mr-4" type="text" placeholder="请上传您的头像" disabled />
					<u-icon name="arrow-right" color="#333" size="24rpx" bold></u-icon>
				</view>
			</view>
			<view class="form-item">
				<view class="label-box">
					<text class="label">姓名</text>
					<text class="required">*</text>
				</view>
				<view class="input-box">
					<input class="input" type="text" v-model="form.name" placeholder="请输入您的姓名" />
				</view>
			</view>
			<view class="form-item">
				<view class="label-box">
					<text class="label">手机号</text>
					<text class="required">*</text>
				</view>
				<view class="input-box">
					<input class="input" type="tel" v-model="form.phone" placeholder="请填写您的手机号" />
				</view>
			</view>
			<!-- <view class="form-item" @click="goJob">
				<view class="label-box">
					<text class="label">职位信息</text>
					<text class="required">*</text>
					<text class="tips">(请选择)</text>
				</view>
				<view class="input-box">
					<input class="input mr-4" type="text" v-model="form.company" placeholder="请选择职位信息" disabled />
					<u-icon name="arrow-right" color="#333" size="24rpx" bold></u-icon>
				</view>
			</view> -->
			<view class="form-item">
				<view class="label-box">
					<text class="label">公司</text>
				    <text class="required">*</text>
				</view>
				<view class="input-box">
					<input class="input" type="text" v-model="form.company" placeholder="请填写任职公司" />
				</view>
			</view>
			<view class="form-item">
				<view class="label-box">
					<text class="label">岗位</text>
					<text class="required">*</text>
				</view>
				<view class="input-box">
					<input class="input" type="text" v-model="form.job" placeholder="请填写您的工作" />
				</view>
			</view>
			<view class="form-item">
				<view class="label-box">
					<text class="label">邮箱</text>
				</view>
				<view class="input-box">
					<input class="input" type="text" v-model="form.email" placeholder="请填写您的邮箱" />
				</view>
			</view>
			<picker mode="region" @change="regionChange">
				<view class="form-item">
					<view class="label-box">
						<text class="label">地址</text>
					</view>
					<view class="input-box">
						<input class="input mr-4" type="text" v-model="form.address" placeholder="请选择地址" disabled />
						<u-icon name="arrow-right" color="#333" size="24rpx" bold></u-icon>
					</view>
				</view>
			</picker>
			<view class="form-item textarea">
				<view class="label-box">
					<text class="label">详细地址</text>
				</view>
				<view class="textarea-box">
					<textarea class="textarea" v-model="form.detail" placeholder="请填写详细地址" />
				</view>
			</view>
		</view>
		
		<view class="bottom-box">
			<button class="btn" :disabled="btnDisabled" @click="submitCard">保存</button>
		</view>
	</view>
</template>

<script>
	import { uploadURL } from '@/api/config.js'
	import { getCardInfo,updateCard} from '@/api/api'
	export default {
		data () {
			return {
				form: {
					id:0,
					avatar_id:0,
					avatar: '',
					name: '',
					phone: '',
					company: '',
					job: '',
					email: '',
					address: '',
					detail: '',
				}
			}
		},
		created () {
			uni.$on('selectJob', (data) => {
				this.form.company = data.company
				this.form.job = data.job
			})
		},
		onLoad(opt) {
			this.form.id = opt.card_id || 0;
			if(this.form.id > 0){
				this.loadData();
			}
		},
		methods: {
			avatarChange () {
				uni.chooseMedia({
					count: 1,
					mediaType: ['image'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						var avatarUrl = res.tempFiles[0].tempFilePath
						uni.uploadFile({
							url: uploadURL,
							filePath: avatarUrl,
							name: 'img',
							success: (fileRes) => {
								uni.hideLoading({ noConflict: true })
								const data = JSON.parse(fileRes.data)
								if (data.code == 1) {
									this.form.avatar = data.path
									this.form.avatar_id = data.id
								} else {
									uni.showToast({
										icon: 'error',
										title: data.msg
									})
								}
							},
							fail: (fileErr) => {
								console.log('fileErr', fileErr);
								uni.hideLoading({ noConflict: true })
								uni.showToast({
									icon: 'error',
									title: '上传失败'
								})
							}
						})
					}
				})
			},
			regionChange (e) {
				this.form.address = e.detail.value.join('')
			},
			goJob () {
				uni.navigateTo({
					url: '/pages/my/card/job'
				})
				
			},
			loadData(){
				getCardInfo({is_password:false}).then(res => {
					if (res) {
						console.log(res.data);
						this.form= {
							id:res.data.id,
							avatar_id:res.data.c_touxiang,
							avatar: res.data.c_touxiang_img,
							name: res.data.c_name,
							phone:  res.data.c_phone,
							company:res.data.c_company,
							job: res.data.c_work,
							email:  res.data.c_email,
							address: res.data.c_address,
							detail: res.data.c_address_detail,
						}
					}
				})
			},
			submitCard(){
				updateCard(this.form).then(res => {
					if (res) {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
						setTimeout(() => {
							uni.reLaunch({
								url: '/pages/my/card/card'
							})
						}, 500)
					}
				})
			}
		},
		computed: {
			btnDisabled () {
				if (this.form.avatar && this.form.name && this.form.phone && this.form.company && this.form.job) {
					return false
				} else {
					return true
				}
			}
		}
	}
</script>

<style lang="scss">
.edit-info {
	padding-bottom: 140rpx;
	padding-bottom: calc(140rpx + constant(safe-area-inset-bottom));
	padding-bottom: calc(140rpx + env(safe-area-inset-bottom));
	.form-box {
		padding: 0 30rpx;
		.form-item {
			padding: 20rpx 0;
			display: flex;
			align-items: center;
			border-bottom: 1rpx solid #eee;
			&.textarea {
				display: block;
				border-bottom: none;
			}
			.label-box {
				margin-right: 14rpx;
				.label {
					color: #333333;
					font-size: 34rpx;
					font-weight: bold;
				}
				.required {
					margin-left: 4rpx;
					color: #d20d0d;
					font-size: 32rpx;
					font-weight: bold;
				}
				.tips {
					margin-left: 8rpx;
					color: #999;
					font-size: 24rpx;
				}
			}
			.input-box {
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: flex-end;
				.avatar {
					width: 92rpx;
					height: 92rpx;
					border-radius: 50%;
				}
				.input {
					flex: 1;
					font-size: 34rpx;
					text-align: right;
				}
			}
			.textarea-box {
				margin-top: 26rpx;
				padding: 32rpx;
				border-radius: 14rpx;
				background-color: #f4f4f4;
				.textarea {
					width: 100%;
					height: 172rpx;
					font-size: 34rpx;
				}
			}
		}
	}
	.bottom-box {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 10;
		height: 120rpx;
		padding: 0 30rpx;
		padding-bottom: 0;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		background-color: #fff;
		display: flex;
		align-items: center;
		.btn {
			margin: 0;
			padding: 0;
			border-radius: 92rpx;
			width: 100%;
			height: 92rpx;
			color: #fff;
			font-size: 30rpx;
			line-height: 92rpx;
			background-color: #cd2a1b;
			&[disabled] {
				color: #fff;
				background-color: #dddddd;
			}
		}
	}
}
</style>
